<style lang="less" scoped>
    .ads_bottom {position: fixed; bottom: 0; height: 0.9rem; width: 100%; line-height: 0.9rem; text-align: center; font-size: 0.3rem; color: #fff; background-color: #d3ac6f;}
</style>
<template>
  <div>
    <yd-cell-group>
        <yd-cell-item>
            <span slot="left">收货人：</span>
            <yd-input slot="right" required v-model="input1" ref="input1" max="20" placeholder="请输入用户名"></yd-input>
        </yd-cell-item>
        <yd-cell-item>
            <span slot="left">手机号：</span>
            <yd-input slot="right" required v-model="input4" ref="input4" regex="mobile" placeholder="请输入手机号码"></yd-input>
        </yd-cell-item>
         <yd-cell-item arrow>
              <span slot="left">选择地区：</span>
              <input slot="right" type="text" @click.stop="show2 = true" v-model="model2" readonly placeholder="请选择收货地址">
        </yd-cell-item>
        <yd-cell-item>
            <yd-textarea slot="right" required placeholder="请输入您的详细地址" maxlength="50"></yd-textarea>
        </yd-cell-item>
    </yd-cell-group>
    <div class="ads_bottom" @click="clickHander">确定</div>
    <!--  -->
    <yd-cityselect
      v-model="show2"
      ref="cityselectDemo"
      :done="result2"
      :items="district"
      provance="新疆"
      city="乌鲁木齐市"
      area="天山区">
    </yd-cityselect>
  </div>
</template>
<script>
import District from 'ydui-district/dist/jd_province_city_area_id';
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input4: '',
      show2: false,
      model2: '新疆 乌鲁木齐市 天山区',
      district: District
    }
  },
  methods: {
    clickHander() {
        const input = this.$refs.input1;
        console.log(input.valid)
        this.$router.go(-1)
    },
    result2(ret) {
      this.model2 = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3
      // console.log()
    }
  }
}
</script>
